<!DOCTYPE html>
<!-- saved from url=(0050)http://agent-test.qhmj18.com/buy/shop#doc-oc-demo1 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="msapplication-tap-highlight" content="no">
    <link type="text/css" rel="stylesheet" href="asset/common.css">
    <link type="text/css" rel="stylesheet" href="asset/amazeui.min.css">
    <link type="text/css" rel="stylesheet" href="asset/bootstrap.min.css">
    <style>
        body.modal-open {
            overflow-y: auto !important;
            padding-right: 0 !important;
        }

        #state {
            width: 100%;
            height: 20px;
            text-align: center;
            margin-bottom: 15px;
        }

        .state-nt {
            width: 314px;
            height: 20px;
            line-height: 20px;
        }

        #submit {
            display: block;
            text-indent: 2em;
            letter-spacing: 2em;
            text-align: center;
            background: #65acda;
            width: 300px;
            height: 40px !important;
            font-size: 18px;
            border: none;
            outline: none;
        }

        .text {
            width: 300px;
        }

        .modal-dialog {
            margin: 200px auto;
        }

        a:hover {
            text-decoration: none
        }

        a:active {
            text-decoration: none;
        }

        a:focus {
            text-decoration: none
        }

        .headerv2-logo-a {
            display: flex;
            align-items: center;
            margin-right: -150px;
        }

        #titleFrom-ch {
            text-align: center;
            font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
            font-weight: 600;
            font-size: 30px;
            color: rgb(0, 0, 0);
            margin-top: 5px;
        }
        .iosMask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .8);
            z-index: 999;
        }

        .maskCon1 {
            position: absolute;
            width: 90%;
            top: 100px;
            left: 5%;
            color: #fff;
        }

        .maskCon1 div {
            font-size: 20px;
            font-weight: bold;
        }

        .maskCon1 img {
            display: inline-block;
            vertical-align: middle;
            margin: 0 5px;
        }

        .maskCon1 span {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: #fb4700;
            border-radius: 30px;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
        }

        .zhishi {
            position: absolute;
            top: -90px;
            right: -4%;
            height: 90px;
        }

        .close {
            position: absolute;
            bottom: 100px;
            left: 0;
            width: 100%;
            text-align: center;
            color: #FFFFFF;
            font-size: 28px;
        }

        .huodong {
            position: absolute;
            background: #fc1546;
            color: #fff;
            padding: 3px 5px;
            right: 0;
            top: 0;
            border-bottom-left-radius: 10px;
            line-height: 20px;
        }
    </style>
    <title>游戏充值</title>
</head>
<body>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="titleFrom-ch" style="margin-top: 30px;">会员登录</h4>
            </div>
            <div class="modal-body" style="height: 300px;">
                <form id="loginform" style="padding: 0 3rem;">

                    <div class="in" style="margin-left: auto;margin-bottom: .75rem">

                        <input type="text" name="email" class="text" autocomplete="username" placeholder="用户名/注册邮箱">
                    </div>
                    <div class="in">
                        <input type="password" name="pwd" class="text" placeholder="请输入密码"
                               autocomplete="current-password">
                    </div>

                    <div style="clear:both;">

                    </div>
                    <div style="text-align: center;margin-top: 20px">
                        <a href="" onclick="alert('登录信息有误');return false" class="ui-button ui-button-primary" role="button" id="submit">
                            <span
                                style="color: #fff;text-align:center;float: left;margin-top:8px;margin-left: 28%;">登录</span>
                        </a>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<header id="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="" οnclick="return false;" data-toggle="modal" data-target="#myModal" class="" data-am-offcanvas=""><span
                style="display: block;line-height:40px;margin: 8px 0 0 8px;border-radius: 5px; background:rgba(255,255,255,.5);color:#444;font-size: 15px;">菜单</span></a>
    </div>
</header>
<div class="phoneCon" style="padding-bottom: 0;">
    <div class="tongzhi" style="margin-bottom: 15px;">
        <div class="ggtz" style="border:1px solid #E8EDF8">火爆活动</div>
        <div class="tzCon">
        </div>
    </div>
    <div class="phoneTit clear">购买钻石</div>
    <div class="buyCardCon clear">
        <ul class="roomCardList clear">
            <li class="active">
                <div class="select-one">
                    <div class="price"><span class="amount">1234</span>元<span class="huodong" style="font-size: 13px;">活动</span>
                    </div>
                    <div class="bottom"><span class="beforeCard">50354</span>个+<span class="afterCard"
                                                                                      style="color: #fc5549">12</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_1">
                </div>
            </li>
            <li>
                <div class="select-one">
                    <div class="price"><span class="amount">666</span>元<span class="tj">推荐</span><span class="huodong"
                                                                                                          style="font-size: 13px;">活动</span>
                    </div>
                    <div class="bottom"><span class="beforeCard">66</span>个+<span class="afterCard"
                                                                                   style="color: #fc5549">34</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_10">
                </div>
            </li>
            <li>
                <div class="select-one">
                    <div class="price"><span class="amount">111</span>元<span class="tj">推荐</span><span class="huodong"
                                                                                                          style="font-size: 13px;">活动</span>
                    </div>
                    <div class="bottom"><span class="beforeCard">111</span>个+<span class="afterCard"
                                                                                    style="color: #fc5549">111</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_3">
                </div>
            </li>
            <li>
                <div class="select-one">
                    <div class="price"><span class="amount">300</span>元<span class="huodong"
                                                                              style="font-size: 13px;">活动</span></div>
                    <div class="bottom"><span class="beforeCard">6000</span>个+<span class="afterCard"
                                                                                     style="color: #fc5549">900</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_4">
                </div>
            </li>
            <li>
                <div class="select-one">
                    <div class="price"><span class="amount">1000</span>元<span class="tj">推荐</span><span class="huodong"
                                                                                                           style="font-size: 13px;">活动</span>
                    </div>
                    <div class="bottom"><span class="beforeCard">20000</span>个+<span class="afterCard"
                                                                                      style="color: #fc5549">4000</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_5">
                </div>
            </li>
            <li>
                <div class="select-one">
                    <div class="price"><span class="amount">5000</span>元<span class="huodong" style="font-size: 13px;">活动</span>
                    </div>
                    <div class="bottom"><span class="beforeCard">100000</span>个+<span class="afterCard"
                                                                                       style="color: #fc5549">30000</span>个
                    </div>
                    <input type="hidden" id="pid" value="diamond_10_6">
                </div>
            </li>
        </ul>
        <div class="buyCardConW">
            <div class="clear yueTehui">

                <p class="zongjiZuan">总计获得钻石数：<span class="total">100720</span>个</p>
                <p class="sumCard">获得钻石：<span class="totalCards">50366</span>钻石(<span class="bCard">50354</span>+<span
                        class="aCard">12</span>个)</p>
                <p>本次购买您将额外获赠钻石数：<span class="per">50354</span>个</p>
                <p class="ewaiZuan" style="display: none;">余额支付额外获赠钻石数：<span class="yuezs">50354</span>个</p>

                <p class="sumPrice">应付金额：<span class="totalAmount">1234</span>元</p>
            </div>
        </div>
        <a class="button ljzfBtn" href="" οnclick="return false;" data-toggle="modal" data-target="#myModal">立即支付</a>
    </div>
</div>

<script src="asset/jquery-1.11.1.min.js"></script>
<script src="asset/bootstrap.js"></script>
<script src="asset/amazeui.min.js"></script>
<script src="asset/common.js"></script>
<script>

    $(".payWay a").click(function () {
        $(".payWay a").removeClass("active");
        $(this).addClass("active");
        checkActive();
        if ($(this).hasClass("zfb")) {
            $(".ewaiZuan").hide();
            if (isWeixin()) {
                $(".dailiMask").show();
            }

        } else if ($(this).hasClass("yezf")) {
            $(".ewaiZuan").show();
        }
    });

    /*判断是否是微信浏览器*/
    function isWeixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    //判断是否手机
    function isMobile() {
        var ua = navigator.userAgent;

        var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

            isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

            isAndroid = ua.match(/(Android)\s+([\d.]+)/),

            isMobile = isIphone || isAndroid;
        if (isMobile) {
            return true;
        } else {
            return false;
        }
    }

    function checkActive() {
        var amount = $(".active").find(".amount").text();
        var bCard = parseInt($(".active").find(".beforeCard").text());
        var aCard = parseInt($(".active").find(".afterCard").text());
        var totalCard = parseInt(bCard + aCard);
        var areaID = "1";
        var yuezs = 0;
        $(".sumCard .totalCards").text(totalCard);
        $(".sumCard .bCard").text(bCard);
        $(".sumCard .aCard").text(aCard);
        $(".sumPrice .totalAmount").text(amount);
        var per = "50.00";
        var ewai = parseInt(per / (100 - per) * bCard);
        $(".per").text(ewai);
        if ($(".zfb").hasClass("active") || $(".wx-jsp").hasClass("active") || $(".wx-h5").hasClass("active")) {
            yuezs = 0;
        } else if ($(".yezf").hasClass("active") && (areaID != 11 && areaID != 10001 && areaID != 40 && areaID != 41 && areaID != 51 && areaID != 52)) {
            if (areaID == 10002) {
                yuezs = parseInt(0.03 * parseInt(bCard));
            } else {
                yuezs = parseInt(0.06 * parseInt(bCard));
            }
        }
        $(".yuezs").text(yuezs);
        var total = totalCard + parseInt(ewai) + yuezs;
        $(".total").text(total);
    }

    $(".roomCardList li").click(function () {
        $(".roomCardList li").removeClass("active");
        $(this).addClass("active");
        checkActive();
    });

    function doPay() {
        var method = $(".active .method").val();
        var amount = $(".sumPrice .totalAmount").text();
        //判断是否可以余额支付
        var pid = $(".active #pid").val();
        var url = '/buy/do-pay';
        var isFirst = checkFirst(pid);
        if (isFirst) {
            new_alert(isFirst, '.errMask');
            return false;
        }
        if (method == 2) {
            $('.moudleLoad').show();
            $.post(url, {
                pid: pid,
                method: method,
                '_csrf-agent': 'SGd5NUtSbE49VR5qLgsYABk9HEAbZxksHj4JYy4fAXx.ODUFLSsNAQ=='
            }, function (result) {
                if (result.status == 1) {
                    new_alert(result.msg, '.errMask');
                } else if (result.status == 0) {
                    new_alert(result.msg, '.errMask');
                    $('.moudleLoad').hide();
                    return false;
                }
            });
        } else if (method == 1) {
            window.parent.location.href = url + '?pid=' + pid + '&method=' + method;
        } else {
            window.parent.location.href = '/buy/get-openid?pid=' + pid + '&app_type=' + isChat;
        }
    }

    function checkFirst(pid) {
        var res_msg = "";
        $.ajax({
            url: "/buy/is-first",
            async: false,
            type: 'post',
            data: {"_csrf-agent": 'SGd5NUtSbE49VR5qLgsYABk9HEAbZxksHj4JYy4fAXx.ODUFLSsNAQ==', 'pid': pid},
            dataType: 'json',
            success: function (result) {
                res_msg = result.msg;
            }
        });
        return res_msg;
    }

    function copy() {
        var Url2 = document.getElementById("js-copy-text");
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        if (isAndroid) {
            Url2.select();
            try {
                if (document.execCommand('copy', false, null)) {
                    document.execCommand("Copy");
                    alert("已复制好，可贴粘。");
                } else {
                    alert("复制失败，请手动复制");
                }
            } catch (err) {
                alert("复制失败，请手动复制");
            }
        } else {
            /*Url2.focus();
            Url2.selectionStart = 0;
            Url2.selectionEnd = Url2.value.length;*/
            $('.iosMask').show();

        }

    }

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS) {
        $('.copyButton').html('其他浏览器打开').css({"width": "120px"});
        $(".copyButton").show();
    } else {
        $(".copyButton").show();
    }
</script>
